<template>
  <div class="example-container">
    <h2>数字输入组件示例</h2>
    
    <el-card class="example-card">
      <template #header>
        <span>基础用法</span>
      </template>
      
      <el-form :model="form" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="百分比">
              <PercentageInput 
                v-model="form.percentage" 
                placeholder="请输入占比"
                :required="true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="金额">
              <MoneyInput 
                v-model="form.amount" 
                placeholder="请输入金额"
                :min="0"
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="人数">
              <PersonInput 
                v-model="form.persons" 
                placeholder="请输入人数"
                :min="1"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工天">
              <DayInput 
                v-model="form.workDays" 
                placeholder="请输入工天"
                :min="0"
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="重量">
              <NumberInput 
                v-model="form.weight"
                unit="kg"
                :min="0"
                :max="1000"
                :precision="2"
                :allow-decimal="true"
                placeholder="请输入重量"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数量">
              <NumberInput 
                v-model="form.quantity"
                unit="个"
                :min="0"
                :precision="0"
                :allow-decimal="false"
                placeholder="请输入数量"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card class="example-card">
      <template #header>
        <span>表格中使用</span>
      </template>
      
      <el-table :data="tableData" border>
        <el-table-column label="占比" align="center" width="150">
          <template #default="scope">
            <PercentageInput
              v-if="scope.row.isEditing"
              v-model="scope.row.percentage"
              :required="true"
              size="small"
            />
            <span v-else>
              <span v-if="scope.row.percentage">{{ formatPercentage(scope.row.percentage) }}</span>
              <span v-else>-</span>
            </span>
          </template>
        </el-table-column>
        
        <el-table-column label="金额" align="center" width="150">
          <template #default="scope">
            <MoneyInput
              v-if="scope.row.isEditing"
              v-model="scope.row.amount"
              size="small"
            />
            <span v-else>
              <span v-if="scope.row.amount">{{ formatAmount(scope.row.amount) }}元</span>
              <span v-else>-</span>
            </span>
          </template>
        </el-table-column>
        
        <el-table-column label="人数" align="center" width="120">
          <template #default="scope">
            <PersonInput
              v-if="scope.row.isEditing"
              v-model="scope.row.persons"
              size="small"
            />
            <span v-else>
              <span v-if="scope.row.persons">{{ scope.row.persons }}人</span>
              <span v-else>-</span>
            </span>
          </template>
        </el-table-column>
        
        <el-table-column label="操作" align="center" width="120">
          <template #default="scope">
            <el-button 
              size="small" 
              @click="toggleEdit(scope.row)"
            >
              {{ scope.row.isEditing ? '保存' : '编辑' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card class="example-card">
      <template #header>
        <span>表单数据</span>
      </template>
      
      <pre>{{ JSON.stringify(form, null, 2) }}</pre>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import PercentageInput from './PercentageInput/index.vue'
import MoneyInput from '../MoneyInput/index.vue'
import PersonInput from '../PersonInput/index.vue'
import DayInput from '../DayInput/index.vue'
import NumberInput from './index.vue'
import { formatAmount, formatPercentage } from './utils'

const form = reactive({
  percentage: null,
  amount: null,
  persons: null,
  workDays: null,
  weight: null,
  quantity: null
})

const tableData = ref([
  {
    id: 1,
    percentage: 85.5,
    amount: 1234.56,
    persons: 5,
    isEditing: false
  },
  {
    id: 2,
    percentage: 92.3,
    amount: 5678.90,
    persons: 3,
    isEditing: false
  }
])

const toggleEdit = (row: any) => {
  row.isEditing = !row.isEditing
}
</script>

<style scoped>
.example-container {
  padding: 20px;
}

.example-card {
  margin-bottom: 20px;
}

.example-card pre {
  background-color: #f5f5f5;
  padding: 16px;
  border-radius: 4px;
  font-size: 12px;
  overflow-x: auto;
}
</style> 